<template>
    <div class="player_box">
      <div class="my_palyer">
        <!-- 音乐图片及音乐名等 -->
        <div class="player_left">
          <div id="box">
            <img
              src="https://ts1.cn.mm.bing.net/th/id/R-C.b42f14a412328f55cb5e8c4eb33474b8?rik=x%2fDNTh%2fa5jBNdw&riu=http%3a%2f%2fpic.baike.soso.com%2fp%2f20090110%2f20090110120000-101230.jpg&ehk=qFL47TfyKoi7YElvoELPxJEDsri%2fMCd5EjuxL1DTXms%3d&risl=&pid=ImgRaw&r=0"
              alt="">
          </div>
          <div class="music_name">东北民谣(毛不易)</div>
        </div>
        <!-- 播放按钮及菜单 -->
        <div class="player_right">
          <div class="player_btn" @click="playMusic">
            <van-icon v-if="!isPlayer" name="play-circle-o" size="28" />
            <van-icon v-else name="pause-circle-o" size="28" />
          </div>
          <div class="player_menu" @click="clickMenu">
            <van-icon name="bars" size="28" />
          </div>
        </div>
      </div>
  
      <van-popup v-model:show="showRight" position="right" :style="{ width: '40%', height: '80%' }" />
    </div>
  </template>
  <script setup>
  import { ref } from 'vue'
  
  let isPlayer = ref(true)
  let isRotate = ref(true)
  // 弹出
  let showRight = ref(false)
  
  const playMusic = () => {
    isPlayer.value = !isPlayer.value
    // 调用旋转事件
    toggleRotation()
  }
  // 旋转事件
  function toggleRotation() {
    isRotate.value = !isRotate.value;
    if (isRotate.value) {
      document.getElementById('box').classList.remove('paused');
    } else {
      document.getElementById('box').classList.add('paused');
    }
  }
  
  // 点击音乐列表
  const clickMenu = () => {
    console.log('点击了音乐列表');
    showRight.value = true
  }
  
  </script>
  <style scoped>
  .player_box {
    height: 60px;
    position: fixed;
    padding: 10px;
    bottom: 0;
    background-color: #fff;
    border-top: 1px solid #ccc;
    width: 100%;
    box-sizing: border-box;
  }
  
  .my_palyer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .my_palyer .player_left,
  .my_palyer .player_right {
    display: flex;
    align-items: center;
  }
  
  .player_left img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  
  .music_name {
    color: #000;
    font-size: 15px;
    font-weight: 500;
    margin-left: 5px;
  }
  
  .player_btn {
    margin-right: 10px;
  }
  
  #box {
    animation: musicRotate 2s infinite linear;
  }
  
  #box.paused {
    animation-play-state: paused;
  }
  
  /* 定义音乐图片旋转的动画 */
  @keyframes musicRotate {
    0% {
      transform: rotate(0deg);
    }
  
    100% {
      transform: rotate(360deg);
    }
  }
  </style>